/* 夜间 */
/* dark */
:root.dark {
  --base-font: '思源宋体 CN Medium', 'Helvetica Neue', 'Noto Sans',
    -apple-system, Ubuntu, 'Microsoft YaHei', Helvetica, 'Nimbus Sans L', Arial,
    'Liberation Sans', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB',
    'Source Han Sans SC', 'Source Han Sans CN', 'Wenquanyi Micro Hei',
    'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp',
    'Source Sans Pro', sans-serif;
  --title-font: '思源宋体 CN Medium', 'EB Garamond', Georgia, 'Noto Serif',
    'Noto Serif CJK SC', 'Nimbus Roman No9 L', 'Songti SC',
    'Source Han Serif SC', 'Source Han Serif CN', STSong, 'AR PL New Sung',
    'AR PL SungtiL GB', NSimSun, SimSun, 'TW\-Sung', 'WenQuanYi Bitmap Song',
    'AR PL UMing CN', 'AR PL UMing HK', 'AR PL UMing TW', 'AR PL UMing TW MBE',
    PMingLiU, MingLiU, 'Ubuntu', 'Source Sans Pro', serif;
  --monospace: 'Operator Mono Lig Medium', 'JetBrains Mono', 'Fira Code',
    'Cascadia Code', 'Sarasa Term SC', Monaco, 'Deja Vu Sans Mono', Consolas,
    'Lucida Console', 'Andale Mono', 'Roboto Mono', Courier, Monospace !important;

  --title-color: #6f79ff;
  --text-color: #f5f5f5;
  --light-text-color: #666666;
  --link-color: #55d3e4;
  --code-color: #937fce;

  --shadow-color: rgba(128, 107, 192, 0.1);
  --blue: #559ce4;
  --Mica: #323232;
  --border: rgb(179, 179, 179);
  --shadow: 0.4rem 0.8rem 1.6rem var(--shadow-color);

  --table-background-color: var(--Mica);

  --window-border: 1px solid #555;
  --bg-color: #363b40;
  --rawblock-edit-panel-bd: #333;
  --search-select-bg-color: #428bca;

  --side-bar-bg-color: #192030;
  --control-text-color: var(--text-color);
  --active-file-text-color: var(--title-color);
  --active-file-bg-color: var(--shadow-color);
  --item-hover-bg-color: var(--shadow-color);
  --active-file-border-color: var(--title-color);

  body {
    background: #232736;
  }

  /* 打印 */
  /* print */
  @media print {
    html {
      font-size: 0.9rem;
    }

    table,
    pre {
      page-break-inside: avoid;
    }

    pre {
      word-wrap: break-word;
    }

    .write {
      max-width: 100%;
    }

    @page {
      size: A4; /* PDF A4 */
      margin-left: 0;
      margin-right: 0;
    }
  }

  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: initial;
  }

  /* 页边距 和 页面大小 */
  .write {
    font-family: var(--base-font);
    /* max-width: 914px; */
    margin: 0 auto;
    padding: 1rem 1rem;
    padding-bottom: 100px;
  }

  .write p {
    line-height: 1.6rem;
    word-spacing: 0.05rem;
  }

  body {
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6rem;
    letter-spacing: 0;
    overflow-x: hidden;
  }

  body > *:first-child {
    margin-top: 0 !important;
  }

  body > *:last-child {
    margin-bottom: 0 !important;
  }

  /* 标题 */
  /* title */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: normal;
    line-height: 1.5;
    cursor: text;
    color: var(--title-color);
    font-family: var(--title-font);
  }

  .write h1,
  .write h2,
  .write h3,
  .write h4,
  .write h5,
  .write h6 {
    background: linear-gradient(to bottom, #43cbff, #9708cc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    caret-color: var(--text-color);
  }

  h1 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 2rem;
  }

  h1:after {
    content: '';
    display: block;
    margin: 0.2em auto 0;
    width: 6rem;
    height: 2.4px;
    border-bottom: 2px solid var(--title-color);
  }

  h2 {
    padding-left: 0.4em;
    font-size: 1.6em;
    border-left: 0.4em solid var(--title-color);
    border-bottom: 1px solid var(--title-color);
  }

  h3 {
    font-size: 1.6em;
  }

  h4 {
    font-size: 1.4em;
  }

  h5 {
    font-size: 1.2em;
  }

  h6 {
    font-size: 1em;
  }

  /* 超链接 */
  /* hyperlink */
  a {
    color: var(--link-color);
    text-decoration: none;
  }

  .write a {
    border-bottom: none;
    background: linear-gradient(to bottom, #3c8ce7, #00eaff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    caret-color: var(--text-color);
  }

  .write a:hover {
    border-bottom: 1px solid var(--link-color);
    color: var(--link-color);
    text-decoration: none;
  }

  p,
  blockquote,
  ul,
  ol,
  dl,
  table {
    margin: 0.8em 0;
  }

  /* horizontal rule */
  hr {
    margin: 1em auto;
    border: 0;
    border-top: 1px solid var(--border);
  }

  /* 列表 */
  li > ol,
  li > ul {
    margin: 0 0;
  }

  li p.first {
    display: inline-block;
  }

  ul,
  ol {
    padding-left: 2rem;
  }

  ul:first-child,
  ol:first-child {
    margin-top: 0;
  }

  ul:last-child,
  ol:last-child {
    margin-bottom: 0;
  }

  .write ol li,
  ul li {
    padding-left: 0.1rem;
  }

  /* 表格 */
  table {
    margin-bottom: 1.25rem;
  }

  table th,
  table td {
    padding: 8px;
    line-height: 1.25rem;
    vertical-align: middle;
    border: 1px solid #ddd;
  }

  table th {
    font-weight: bold;
  }

  table thead th {
    vertical-align: middle;
  }

  table tr:nth-child(2n),
  thead {
    background-color: var(--table-background-color);
  }

  /* 引用 */
  blockquote {
    border-left: 0.2em solid var(--blue);
    padding-left: 1em;
    color: var(--light-text-color);
    font-family: var(--base-font);
  }

  /* 文字样式 */
  strong,
  em,
  code,
  tt,
  mark {
    padding: 0 4px;
    border-radius: 8px 8px 8px 8px;
    margin: 0 2px;
    color: var(--text-color);
    background-color: var(--Mica);
  }

  /* 粗体 */
  .write strong {
    font-weight: bold;
  }

  /* 斜体 */
  .write em {
  }

  /* 行间公式 */
  /* inline code */
  .write code,
  tt {
    font-family: var(--monospace);
    color: var(--code-color);
    margin: 0 2px;
  }

  /* 高亮 */
  /* highlight */
  .write mark {
    background-color: #fdeebb;
    color: #e9781e;
  }

  .write del {
    padding: 1px 2px;
  }

  /* 写![shadow-...]() 显示图片阴影 */
  img[alt|='shadow'] {
    box-shadow: 0.4rem 0.8rem 1.6rem var(--shadow-color);
  }

  header,
  .context-menu,
  .megamenu-content,
  footer {
    font-family: var(--base-font);
  }

  .file-node-content:hover .file-node-icon,
  .file-node-content:hover .file-node-open-state {
    visibility: visible;
  }

  .html-for-mac .context-menu {
    --item-hover-bg-color: #e6f0fe;
  }

  /* 代码段 背景 */
  pre {
    --select-text-bg-color: #e4d4f5;
  }

  /* language tip */
  .write .code-tooltip {
    border: 1px solid var(--border);
    border-radius: 24px 24px 24px 24px;
    padding: 8px 12px 8px 12px;
    margin: 8px 12px 8px 12px;
  }

  .auto-suggest-container {
    border-color: #b4b4b4;
  }

  .auto-suggest-container .autoComplt-hint.active {
    background: #b4b4b4;
    color: inherit;
  }

  /* 侧栏 */
  /* sidebar */
  #typora-sidebar,
  .typora-node #typora-sidebar {
    box-shadow: 3px 0px 10px var(--shadow-color);
    color: var(--text-color);
  }

  .sidebar-content-content {
    font-size: 0.9rem;
  }

  /* 选中的文字 */
  ::selection {
    background: #ccc;
    color: var(--blue);
  }

  ::-moz-selection {
    background: #ccc;
    color: var(--blue);
  }

  ::-webkit-selection {
    background: #ccc;
    color: var(--blue);
  }

  #recent-file-panel-action-btn {
    background: inherit;
    border: 1px grey solid;
  }

  #recent-file-panel tbody tr:nth-child(2n-1) {
    background-color: transparent !important;
  }

  /* 非激活窗口 */
  /* ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,255,0,0.4);
  } */

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 165, 183, 0.7);
  }

  /* 源代码按钮 */
  .typora-sourceview-on #toggle-sourceview-btn,
  #footer-word-count:hover,
  .ty-show-word-count #footer-word-count {
    background: #333333;
  }

  /* new export menu in setting */
  .export-detail {
    color: var(--text-color) !important;
    background: transparent !important;
  }

  .export-item.active {
    background: var(--Mica) !important;
    border-radius: 6px !important;
  }

  .export-detail textarea {
    background: transparent;
    border-radius: 6px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }

  .export-items-list-control {
    background: var(--Mica) !important;
    border-radius: 6px !important;
  }

  .icon-dot-3:before {
    color: var(--text-color);
    background: var(--Mica) !important;
    z-index: 1;
  }

  .row.text-input select {
    background: var(--Mica) !important;
    width: 510px !important;
  }

  code[class*='language-'],
  pre[class*='language-'] {
    color: #f92aad;
    text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
    background: none;
    font-family: 'Operator Mono Lig Medium', Arial, sans-serif;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  /* Code blocks */
  pre[class*='language-'] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
  }

  :not(pre) > code[class*='language-'],
  pre[class*='language-'] {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
  }

  /* Inline code */
  :not(pre) > code[class*='language-'] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
  }

  .token.comment,
  .token.block-comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: #8e8e8e;
  }

  .token.punctuation {
    color: #ccc;
  }

  .token.tag,
  .token.attr-name,
  .token.namespace,
  .token.number,
  .token.unit,
  .token.hexcode,
  .token.deleted {
    color: #e2777a;
  }

  .token.property,
  .token.selector {
    color: #72f1b8;
    text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
  }

  .token.function-name {
    color: #6196cc;
  }

  .token.boolean,
  .token.selector .token.id,
  .token.function {
    color: #fdfdfd;
    text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975,
      0 0 8px #03edf975;
  }

  .token.class-name {
    color: #fff5f6;
    text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75,
      0 0 25px #fc1f2c75;
  }

  .token.constant,
  .token.symbol {
    color: #f92aad;
    text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
  }

  .token.important,
  .token.atrule,
  .token.keyword,
  .token.selector .token.class,
  .token.builtin {
    color: #f4eee4;
    text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
  }

  .token.string,
  .token.char,
  .token.attr-value,
  .token.regex,
  .token.variable {
    color: #f87c32;
  }

  .token.operator,
  .token.entity,
  .token.url {
    color: #67cdcc;
  }

  .token.important,
  .token.bold {
    font-weight: bold;
  }

  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }

  .token.inserted {
    color: green;
  }
}
